<!--市场行情-->
<template>
  <div class="app-container">
    <biaoti :title-top="title"/>
   <el-row>
     <el-col :span="10">
       <el-table :data="tableData"
                 style="width: 98%;color: #49494a;"
                 ref="multipleTable"
                 :row-class-name="tableRowClassName"
                 :header-cell-style="getRowClass">
         <el-table-column label=""
                          type="selection">
         </el-table-column>
         <el-table-column label="区域"  align="center">
           <template slot-scope="scope">
             <span>{{ scope.row.a }}</span>
           </template>
         </el-table-column>

         <el-table-column label="牛肉价格(元/kg)"  align="center">
           <template slot-scope="scope">
             <span>{{ scope.row.b }}</span>
           </template>
         </el-table-column>

         <el-table-column label="肉牛价格(元/kg)"  align="center">
           <template slot-scope="scope">
             <span>{{ scope.row.c }}</span>
           </template>
         </el-table-column>
         <el-table-column label="牛犊价格(元/kg)"  align="center">
           <template slot-scope="scope">
             <span>{{ scope.row.d }}</span>
           </template>
         </el-table-column>
         <el-table-column label="国货市场价(元/kg)"  align="center">
           <template slot-scope="scope">
             <span>{{ scope.row.e }}</span>
           </template>
         </el-table-column>
       </el-table>
     </el-col>
     <el-col :span="14">
       <el-row>
         <div id="linezhe" style="width: 100%; height: 400%;">
         </div>
       </el-row>
       <el-row>
         <div id="linezhe1" style="width: 100%; height: 400%;">
         </div>
       </el-row>
     </el-col>
   </el-row>

  </div>
</template>

<style>
.table>:not(caption)>*>* {
  padding: 0px !important;
}


/*更改表格颜色*/
.double {
  background: #87868c !important;
}
.single {
  background: #ffffff !important;
}

</style>
<style lang="less" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
</style>

<script>
import echarts from "echarts";
export default {
  name: 'Bazaar',
  data () {
    return {
      linezhe:null,
      randomArr: [],
      randomDate: ['北京','河南','宁夏','甘肃','新疆'],
      title:'市场行情',
      tableData: [{
        a: '山西',
        b: '75',
        c: '76',
        d:'69',
        e: '78',
      },{
        a: '宁夏',
        b: '74',
        c: '77',
        d:'69',
        e: '78',
      },{
        a: '甘肃',
        b: '74',
        c: '77',
        d:'69',
        e: '78',
      },
        {
          a: '新疆',
          b: '74',
          c: '77',
          d:'69',
          e: '78',
        }],
    }  },
  methods: {
    zhengHe() {
      let result = this.randomArr.map((item, i) => ({
        value: item,
        name: this.randomDate[i]
      }));
      this.result = result;
    },
    randomData() {
      for (let i = 1; i <= 10; i++) {
        let temp = 0;
        for (let j = 1; j <= 10; j++) {
          temp += Math.floor(Math.random() * 12);
        }
        this.randomArr.push(temp);
      }
    },
    drawLine() {
      let temp = echarts.init(document.getElementById('linezhe'));
      let option = {
        color:'#ffffff',
        backgroundColor:'#6b6969',
        xAxis: {
          type: 'category',
          data: this.randomDate,
          nameTextStyle: {        //坐标轴名称的文字样式
            color: '#ffffff',
            fontSize: 16,
            padding: [0, 0, 0, 20]
          },
          axisLine: {             //坐标轴轴线相关设置。
            lineStyle: {
              color: '#ffffff',
            }
          },
        },
        yAxis: {
          nameTextStyle: {
            color: '#ffffff',
            fontSize: 16,
            padding: [0, 0, 10, 0]
          },
          axisLine: {
            lineStyle: {
              color: '#ffffff',
            }
          },
          type: 'value'
        },
        series: [
          {
            label: {
              show: true,
              position: 'top'
            },
            data: this.randomArr,
            type: 'line',
            smooth: true
          }
        ]
      };
      temp.setOption(option);
    },
    zhengHe1() {
      let result = this.randomArr.map((item, i) => ({
        value: item,
        name: this.randomDate[i]
      }));
      this.result = result;
    },
    randomData1() {
      for (let i = 1; i <= 10; i++) {
        let temp = 0;
        for (let j = 1; j <= 10; j++) {
          temp += Math.floor(Math.random() * 12);
        }
        this.randomArr.push(temp);
      }
    },
    drawLine1() {
      let temp = echarts.init(document.getElementById('linezhe1'));
      let option = {
        color:'#ffffff',
        backgroundColor:'#6b6969',
        xAxis: {
          type: 'category',
          data: this.randomDate,
          nameTextStyle: {        //坐标轴名称的文字样式
            color: '#ffffff',
            fontSize: 16,
            padding: [0, 0, 0, 20]
          },
          axisLine: {             //坐标轴轴线相关设置。
            lineStyle: {
              color: '#ffffff',
            }
          },
        },
        yAxis: {
          nameTextStyle: {
            color: '#ffffff',
            fontSize: 16,
            padding: [0, 0, 10, 0]
          },
          axisLine: {
            lineStyle: {
              color: '#ffffff',
            }
          },
          type: 'value'
        },
        series: [
          {
            label: {
              show: true,
              position: 'top'
            },
            data: this.randomArr,
            type: 'line',
            smooth: true
          }
        ]
      };
      temp.setOption(option);
    },
    tableRowClassName ({ row, rowIndex }) {
      if ((rowIndex + 0) % 2 === 0) {
        return 'double';
      } else {
        return 'single';
      }
    }, getRowClass ({ rowIndex }) {
      if (rowIndex == 0) {
        return 'background:#49494a'
      } else {
        return ''
      }

    },

  },
  mounted() {
    // this.drawLine();
    this.randomData();
    this.zhengHe();
    this.drawLine();
    this.randomData1();
    this.zhengHe1();
    this.drawLine1();
  }
}
</script>
